<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>诗词周历-2025.06.30~07.06</title>
    <meta name="author" content="Ralap_Ma">
    <meta name="description" content="Ralap_Ma, 代码如诗，bug如谜.删库跑路终是戏，Ctrl+S 保平安。">
    <meta name="keywords" content="Ralap_Ma, Ralap_Ma的记录, Java, Html, Vue.js">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="theme-color" content="#ffffff">
</head>

<body>
    <div id="main">
        <div class="container">
            <div id="grid" class="ui stackable two column grid"
                style="background-image: url('he.png');">
                <div class="zuo column" style="background: rgba(255, 255, 255, 0.6);">
                    <div id="imageCover" class="cover"
                        style="background-image: url('647.jpg');">
                        <div class="intro">
                            <div class="inner">
                                <div class="left" style="display: inline-block;" onclick="last()">
                                    ←
                                </div>
                                <div class="middle"> <a id="imageLink" href="" target="blank"></a></div>

                                <div class="right" style="display: inline-block;" onclick="next()">
                                    →
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="you column">
                    <div class="you-wrapper" style="background: rgba(255, 255, 255, 0.6);">
                        <div class="progress">
                            <div id="progress" class="label" style="width: 49.589%;"></div>
                        </div>

                        <div class="ui today only-screen equal width grid">
                            <div class="l five wide column">
                                <div id="todaySolar" class="yang">2025.7.1 星期二</div>
                                <div id="firstSolar" class="yang">06.30~07.06</div>
                            </div>
                            <div class="r column">
                                <div onclick="today()" id="todayLunar" class="yin">乙巳·六月初七</div>
                                <div onclick="today()" id="firstLunar" class="yin">六月初六~六月十二</div>
                            </div>
                        </div>


                        <div class="middle">
                            <div class="ui pinfo equal width grid meta">
                                <div id="ptitle" class="l title ten wide column">西江月·夜行黄沙道中</div>
                                <div id="pauthor" class="r author column">宋·辛弃疾</div>
                            </div>
                            <div id="pcontent-wrapper">
                                <div id="pcontent-grid" class="ui equal width grid">
                                    <div class="l twelve wide column">
                                        <div id="pcontent" class="poetry-content">
                                            <p>明月别枝惊鹊，</p>
                                            <p>清风半夜鸣蝉。</p>
                                            <p>稻花香里说丰年，</p>
                                            <p>听取蛙声一片。 </p>
                                            <p>七八个星天外，</p>
                                            <p>两三点雨山前。</p>
                                            <p>旧时茅店社林边，</p>
                                            <p>路转溪桥忽见。</p>
                                        </div>
                                    </div>
                                    <div class="r column">
                                        <div class="meta">

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="calendar">
                            <div class="ui text seven item menu">
                                <div id="w1" data-date="2018-08-01" class="item">
                                    <div>
                                        <div class="yang">30</div>
                                        <div class="yin">初六</div>
                                    </div>
                                </div>
                                <div id="w2" class="item active">
                                    <div>
                                        <div class="yang">1</div>
                                        <div class="yin">初七</div>
                                    </div>
                                </div>
                                <div id="w3" class="item">
                                    <div>
                                        <div class="yang header">2</div>
                                        <div class="yin">初八</div>
                                    </div>
                                </div>
                                <div id="w4" class="item">
                                    <div>
                                        <div class="yang header">3</div>
                                        <div class="yin">初九</div>
                                    </div>
                                </div>
                                <div id="w5" class="item">
                                    <div>
                                        <div class="yang header">4</div>
                                        <div class="yin">初十</div>
                                    </div>
                                </div>
                                <div id="w6" class="item">
                                    <div>
                                        <div class="yang header">5</div>
                                        <div class="yin">十一</div>
                                    </div>
                                </div>
                                <div id="w7" class="item">
                                    <div>
                                        <div class="yang header">6</div>
                                        <div class="yin">十二</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="footer">
                        © <a href="">Ralap_Ma.io</a> 2025.07
                    </div>

                </div>
            </div>
        </div>



    </div>
    <script src="script.js">
        function weekNumber(d) {
                d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
                d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
                var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
                var weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
                return [d.getUTCFullYear(), weekNo];
            }
            function monDay(d) {
                d = new Date(d);
                var day = d.getDay(),
                    diff = d.getDate() - day + (day == 0 ? -6 : 1);
                return new Date(d.setDate(diff));
            }
            function weekDays(current) {
                var week = new Array();
                // Starting Monday not Sunday
                current.setDate((current.getDate() - current.getDay() + 1));
                for (var i = 0; i < 7; i++) {
                    week.push(
                        new Date(current)
                    );
                    current.setDate(current.getDate() + 1);
                }
                return week;
            }
            function setContentP(content) {
                if (content instanceof Array) {
                    var ps = content
                } else {
                    var ps = content.split('\n');
                }
                var root = document.getElementById("pcontent");

                root.innerHTML = '';

                for (var i in ps) {
                    var p = ps[i]
                    var element = document.createElement('p');
                    var text = document.createTextNode(p);
                    element.appendChild(text);
                    root.appendChild(element);
                }
            }
            var wrappers = ["site-wrapper", "social-links-wrapper", "donation-wrapper", "skin-wrapper"]

            var weekPoetry = [
                {
                    "title": "采桑子·恨君不似江楼月",
                    "author": "宋·吕本中",
                    "image": "polayoutu-yue-00005",
                    "content": "恨君不似江楼月，\n南北东西，\n南北东西，\n只有相随无别离。\n恨君却似江楼月，\n暂满还亏，\n暂满还亏，\n待得团圆是几时？"
                },
                {
                    "title": "问刘十九",
                    "author": "唐·白居易",
                    "image": "polayoutu-00006",
                    "content": "绿蚁新醅酒，\n红泥小火炉。\n晚来天欲雪，\n能饮一杯无？"
                },
                {
                    "title": "江城子·十年生死两茫茫",
                    "author": "宋·苏轼",
                    "image": "polayoutu-00021",
                    "content": "十年生死两茫茫，\n不思量，自难忘。\n千里孤坟，无处话凄凉。\n纵使相逢应不识，\n尘满面，鬓如霜。\n夜来幽梦忽还乡，\n小轩窗，正梳妆。\n相顾无言，惟有泪千行。\n料得年年肠断处，\n明月夜，短松冈。"
                },
                {
                    "title": "逢雪宿芙蓉山主人",
                    "author": "唐·刘长卿",
                    "image": "polayoutu-00040",
                    "content": "日暮苍山远，\n天寒白屋贫。\n柴门闻犬吠，\n风雪夜归人。"
                },
                {
                    "title": "次北固山下",
                    "author": "唐·王湾",
                    "image": "polayoutu-00078",
                    "content": "客路青山外， 行舟绿水前。\n潮平两岸阔， 风正一帆悬。\n海日生残夜， 江春入旧年。\n乡书何处达？ 归雁洛阳边。"
                },
                {
                    "title": "元日",
                    "author": "宋·王安石",
                    "image": "new-year",
                    "content": "爆竹声中一岁除，\n春风送暖入屠苏。\n千门万户瞳瞳日，\n总把新桃换旧符。"
                },
                {
                    "title": "菩萨蛮·风柔日薄春犹早",
                    "author": "宋·李清照",
                    "image": "polayoutu-00024",
                    "content": "风柔日薄春犹早，\n夹衫乍着心情好。\n睡起觉微寒，\n梅花鬓上残。\n故乡何处是，\n忘了除非醉。\n沉水卧时烧，\n香消酒未消。"
                },
                {
                    "title": "青玉案·元夕",
                    "author": "宋·辛弃疾",
                    "image": "polayoutu-00017",
                    "content": "东风夜放花千树，\n更吹落，星如雨。\n宝马雕车香满路，\n凤萧声动，玉壶光转，\n一夜鱼龙舞。\n蛾儿雪柳黄金缕，\n笑语盈盈暗香去。\n众里寻他千百度，\n蓦然回首，那人却在，\n灯火阑珊处。"
                },
                {
                    "title": "浪淘沙令·帘外雨潺潺",
                    "author": "南唐·李煜",
                    "image": "polayoutu-1127-00006",
                    "content": "帘外雨潺潺，\n春意阑珊，\n罗衾不耐五更寒。\n梦里不知身是客，\n一饷贪欢。\n独自莫凭阑，\n无限江山，\n别时容易见时难。\n流水落花春去也，\n天上人间。"
                },
                {
                    "title": "钗头凤·红酥手",
                    "author": "宋·陆游",
                    "image": "polayoutu-00070",
                    "content": "红酥手，黄縢酒，\n满城春色宫墙柳。\n东风恶，欢情薄。\n一怀愁绪，几年离索。\n错、错、错。\n春如旧，人空瘦，\n泪痕红浥鲛绡透。\n桃花落，闲池阁。\n山盟虽在，锦书难托。\n莫、莫、莫！"
                }];

            var lunarDays = [{
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 6,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "初六",
                "cYear": 2025,
                "cMonth": 6,
                "cDay": 30,
                "gzYear": "乙巳",
                "gzMonth": "壬午",
                "gzDay": "庚午",
                "isToday": false,
                "isLeap": false,
                "nWeek": 1,
                "ncWeek": "星期一",
                "isTerm": false,
                "Term": null,
                "astro": "巨蟹座"
            }, {
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 7,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "初七",
                "cYear": 2025,
                "cMonth": 7,
                "cDay": 1,
                "gzYear": "乙巳",
                "gzMonth": "壬午",
                "gzDay": "辛未",
                "isToday": true,
                "isLeap": false,
                "nWeek": 2,
                "ncWeek": "星期二",
                "isTerm": false,
                "Term": null,
                "astro": "巨蟹座"
            }, {
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 8,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "初八",
                "cYear": 2025,
                "cMonth": 7,
                "cDay": 2,
                "gzYear": "乙巳",
                "gzMonth": "壬午",
                "gzDay": "壬申",
                "isToday": false,
                "isLeap": false,
                "nWeek": 3,
                "ncWeek": "星期三",
                "isTerm": false,
                "Term": null,
                "astro": "巨蟹座"
            }, {
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 9,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "初九",
                "cYear": 2025,
                "cMonth": 7,
                "cDay": 3,
                "gzYear": "乙巳",
                "gzMonth": "壬午",
                "gzDay": "癸酉",
                "isToday": false,
                "isLeap": false,
                "nWeek": 4,
                "ncWeek": "星期四",
                "isTerm": false,
                "Term": null,
                "astro": "巨蟹座"
            }, {
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 10,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "初十",
                "cYear": 2025,
                "cMonth": 7,
                "cDay": 4,
                "gzYear": "乙巳",
                "gzMonth": "壬午",
                "gzDay": "甲戌",
                "isToday": false,
                "isLeap": false,
                "nWeek": 5,
                "ncWeek": "星期五",
                "isTerm": false,
                "Term": null,
                "astro": "巨蟹座"
            }, {
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 11,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "十一",
                "cYear": 2025,
                "cMonth": 7,
                "cDay": 5,
                "gzYear": "乙巳",
                "gzMonth": "壬午",
                "gzDay": "乙亥",
                "isToday": false,
                "isLeap": false,
                "nWeek": 6,
                "ncWeek": "星期六",
                "isTerm": false,
                "Term": null,
                "astro": "巨蟹座"
            }, {
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 12,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "十二",
                "cYear": 2025,
                "cMonth": 7,
                "cDay": 6,
                "gzYear": "乙巳",
                "gzMonth": "壬午",
                "gzDay": "丙子",
                "isToday": false,
                "isLeap": false,
                "nWeek": 7,
                "ncWeek": "星期日",
                "isTerm": false,
                "Term": null,
                "astro": "巨蟹座"
            }];

            var nextDays = [{
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 7,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "初七",
                "cYear": 2025,
                "cMonth": 7,
                "cDay": 1,
                "gzYear": "乙巳",
                "gzMonth": "壬午",
                "gzDay": "辛未",
                "isToday": true,
                "isLeap": false,
                "nWeek": 2,
                "ncWeek": "星期二",
                "isTerm": false,
                "Term": null,
                "astro": "巨蟹座"
            }, {
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 8,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "初八",
                "cYear": 2025,
                "cMonth": 7,
                "cDay": 2,
                "gzYear": "乙巳",
                "gzMonth": "壬午",
                "gzDay": "壬申",
                "isToday": false,
                "isLeap": false,
                "nWeek": 3,
                "ncWeek": "星期三",
                "isTerm": false,
                "Term": null,
                "astro": "巨蟹座"
            }, {
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 9,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "初九",
                "cYear": 2025,
                "cMonth": 7,
                "cDay": 3,
                "gzYear": "乙巳",
                "gzMonth": "壬午",
                "gzDay": "癸酉",
                "isToday": false,
                "isLeap": false,
                "nWeek": 4,
                "ncWeek": "星期四",
                "isTerm": false,
                "Term": null,
                "astro": "巨蟹座"
            }, {
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 10,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "初十",
                "cYear": 2025,
                "cMonth": 7,
                "cDay": 4,
                "gzYear": "乙巳",
                "gzMonth": "壬午",
                "gzDay": "甲戌",
                "isToday": false,
                "isLeap": false,
                "nWeek": 5,
                "ncWeek": "星期五",
                "isTerm": false,
                "Term": null,
                "astro": "巨蟹座"
            }, {
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 11,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "十一",
                "cYear": 2025,
                "cMonth": 7,
                "cDay": 5,
                "gzYear": "乙巳",
                "gzMonth": "壬午",
                "gzDay": "乙亥",
                "isToday": false,
                "isLeap": false,
                "nWeek": 6,
                "ncWeek": "星期六",
                "isTerm": false,
                "Term": null,
                "astro": "巨蟹座"
            }, {
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 12,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "十二",
                "cYear": 2025,
                "cMonth": 7,
                "cDay": 6,
                "gzYear": "乙巳",
                "gzMonth": "壬午",
                "gzDay": "丙子",
                "isToday": false,
                "isLeap": false,
                "nWeek": 7,
                "ncWeek": "星期日",
                "isTerm": false,
                "Term": null,
                "astro": "巨蟹座"
            }, {
                "lYear": 2025,
                "lMonth": 6,
                "lDay": 13,
                "Animal": "蛇",
                "IMonthCn": "六月",
                "IDayCn": "十三",
                "cYear": 2025,
                "cMonth": 7,
                "cDay": 7,
                "gzYear": "乙巳",
                "gzMonth": "癸未",
                "gzDay": "丁丑",
                "isToday": false,
                "isLeap": false,
                "nWeek": 1,
                "ncWeek": "星期一",
                "isTerm": true,
                "Term": "小暑",
                "astro": "巨蟹座"
            }];

            var images = [{
                "src": "640.jpg",
                "link": "",
                "author": ""
            }, {
                "src": "641.jpg,
                "link": "",
                "author": ""
            }, {
                "src": "642.jpg",
                "link": "",
                "author": ""
            }, {
                "src": "643.jpg",
                "link": "",
                "author": ""
            }, {
                "src": "644.jpg",
                "link": "",
                "author": ""
            }, {
                "src": "645.jpg",
                "link": "",
                "author": ""
            }, {
                "src": "646.jpg",
                "link": "",
                "author": ""
            }, {
                "src": "647.jpg",
                "link": "",
                "author": ""
            }];


            function pad(d) {
                return (d < 10) ? '0' + d.toString() : d.toString();
            }

            function next() {
                window.day.setDate(window.day.getDate() + 1);
                window.year = window.day.getFullYear()
                render(window.day)
            }
            function today() {
                var today = new Date()
                window.year = today.getFullYear()
                render(today);
            }

            function render(t) {
                window.day = t;

                // 季节花
                document.getElementById("grid").style.backgroundImage = "url('https://mmbiz.qpic.cn/sz_mmbiz_png/eAG7amibQkUd7ZxaeiclarGsSrjT3tfaiakXuMJtIfKmRKRTdLu3BtqgZXB1Ybheo2YHRXMBx33P99P7PHld99O0A/640?wx_fmt=png&amp;from=appmsg')";
                var today = new Date();
                var year = today.getFullYear();
                var firstDay = new Date(year, 0, 1)

                // 进度条
                document.getElementById("progress").style.width = Math.abs(Math.round((t - firstDay) / (1000 * 60 * 60 * 24))) / 365 * 100 + '%';

                var currentWeekNumber = weekNumber(t);
                var currentMonday = monDay(t);
                var currentWeeks = weekDays(currentMonday);

                var day = {
                    "lYear": 2025,
                    "lMonth": 6,
                    "lDay": 7,
                    "Animal": "蛇",
                    "IMonthCn": "六月",
                    "IDayCn": "初七",
                    "cYear": 2025,
                    "cMonth": 7,
                    "cDay": 1,
                    "gzYear": "乙巳",
                    "gzMonth": "壬午",
                    "gzDay": "辛未",
                    "isToday": true,
                    "isLeap": false,
                    "nWeek": 2,
                    "ncWeek": "星期二",
                    "isTerm": false,
                    "Term": null,
                    "astro": "巨蟹座"
                };


                var lunarDate = day.gzYear + '·' + day.IMonthCn + day.IDayCn;
                var solarDate = day.cYear + '.' + day.cMonth + '.' + day.cDay + '   ' + day.ncWeek;

                document.getElementById("todayLunar").innerHTML = lunarDate
                document.getElementById("todaySolar").innerHTML = solarDate

                var randomNum = Math.floor(Math.random() * 8) + 1;
                // Poetry
                var poetry = weekPoetry[randomNum]

                if (!poetry) {
                    var poetry = poetrys[Math.floor(Math.random() * poetrys.length)];
                    poetry.content = poetry.paragraphs
                }

                // images

                var image = images[randomNum];


                document.getElementById("imageCover").style.backgroundImage = "url('" + image.src + "')";
                document.getElementById("imageLink").href = image.link;
                document.getElementById("imageLink").innerHTML = image.author;

                // dynasty
                if (poetry.dynasty) {
                    var author = poetry.dynasty + '·' + poetry.author;
                } else {
                    var author = poetry.author;
                }

                setContentP(poetry.content)
                document.getElementById("ptitle").innerHTML = poetry.title
                document.getElementById("pauthor").innerHTML = author

                var weekIds = ["w1", "w2", "w3", "w4", "w5", "w6", "w7"]
                var firstSolar = ""
                var firstLunar = ""
                var lundarDayMap = {
                    "正月初一": "春节",
                    "正月十五": "元宵",
                    "五月初五": "端午",
                    "七月初七": "七夕",
                    "七月十五": "中元",
                    "八月十五": "中秋",
                    "九月初九": "重阳",
                    "十月初一": "寒衣",
                    "十月十五": "下元",
                    "腊月初八": "腊八",
                    "腊月廿三": "北小年",
                    "腊月廿四": "南小年"
                }

                var solarDayMap = {
                    "1.1": "元旦",
                    "10.1": "国庆",
                }


                for (var i in weekIds) {
                    var id = weekIds[i];
                    var solar = currentWeeks[i];
                    var lunar = lunarDays[i];


                    if (id === 'w1') {
                        firstSolar = firstSolar + pad(lunar.cMonth) + '.' + pad(lunar.cDay) + ''
                        firstLunar = firstLunar + pad(lunar.IMonthCn) + pad(lunar.IDayCn);
                    }


                    if (id === 'w7') {
                        titleSolar = lunar.cYear + '.';
                        firstSolar = firstSolar + '~' + pad(lunar.cMonth) + '.' + pad(lunar.cDay) + ''
                        firstLunar = firstLunar + '~' + pad(lunar.IMonthCn) + pad(lunar.IDayCn);
                        document.getElementById("firstSolar").innerHTML = firstSolar
                        document.getElementById("firstLunar").innerHTML = firstLunar

                        document.title = '诗词周历-' + titleSolar + '-' + firstSolar;
                    }

                    var el = document.getElementById(id);

                    if (solar.getDate() === t.getDate()) {
                        el.classList.add("active");
                    } else {
                        el.classList.remove("active")
                    }
                    if (lunar.cYear !== window.year) {
                        el.classList.add('no')
                    } else {
                        el.classList.remove('no')
                    }

                    el.getElementsByClassName("yang")[0].innerHTML = lunar.cDay

                    var lunarElement = el.getElementsByClassName("yin")[0]

                    var nextDay = nextDays[i];

                    if (nextDay.IMonthCn + nextDay.IDayCn === '正月初一') {
                        lunarElement.innerHTML = '除夕'
                        continue
                    }

                    if (nextDay.Term === '清明') {
                        lunarElement.innerHTML = '寒食'
                        continue
                    }

                    if (lunar.IMonthCn + lunar.IDayCn in lundarDayMap) {
                        lunarElement.innerHTML = lundarDayMap[lunar.IMonthCn + lunar.IDayCn]
                        continue
                    }

                    if (lunar.cMonth + '.' + lunar.cDay in solarDayMap) {
                        lunarElement.innerHTML = solarDayMap[lunar.cMonth + '.' + lunar.cDay]
                        continue
                    }

                    if (lunar.Term) {
                        lunarElement.innerHTML = lunar.Term
                    } else {
                        lunarElement.innerHTML = lunar.IDayCn
                    }

                }
            }

            // render(new Date());
            var url = new URL(window.location.href);
            var d = url.searchParams.get("d");

            if (d !== null) {
                var renderDate = new Date(d);
            } else {
                var renderDate = new Date()
            }

            window.year = renderDate.getFullYear()
            render(renderDate)
    </script>
</body>

</html>